// scss-lint:disable IdSelector PlaceholderInExtend NestingDepth QualifyingElement SelectorDepth ImportantRule
.change-list {
  #content-main {
    @extend .container-fluid;
  }

  .object-tools {
    .addlink {
      &::before {
        content: 'add';
      }
    }
  }

  .select2-container {
    z-index: 1070;
  }

  #changelist {
    background: var(--bs-baton-changelist-toolbar-bg);
    border: 1px solid var(--bs-baton-changelist-border-color);
    border-radius: var(--bs-baton-changelist-border-radius);
    clear: both;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;

    .changelist-form-container {
      // django 3.1.1
      display: flex;
      flex: 0 0 100%;
      flex-wrap: wrap;
      overflow: hidden;
    }

    // no object tools
    &:first-child {
      margin-top: 1rem;
    }

    .toplinks {
      margin-bottom: 0;
      padding-left: 0;

      > a,
      > li {
        background: rgba(0, 0, 0, 0.1);
        display: inline-block;
        padding: 0.2rem 1rem;

        &.date-back,
        &.date-back a {
          background: $primary;
          color: $white;
        }
      }

      + br {
        display: none;
      }
    }

    .xfull {
      overflow: auto;
      width: 100%;

      .toplinks {
        white-space: nowrap;
      }
    }

    .date-icon {
      &::before {
        @extend %material;
        content: 'calendar_month';
      }
    }

    .clock-icon {
      &::before {
        @extend %material;
        content: 'schedule';
      }
    }

    #result_list {
      input[type='text'],
      input[type='number'],
      input[type='email'],
      input[type='date'] {
        @extend .form-control;
        display: inline;
        height: 28px;
        margin: 2px 0;
        width: auto;
      }
    }
  }

  #toolbar {
    @extend .mb-0;
    @extend .p-3;
    @include make-col(12);
    background: var(--bs-baton-changelist-toolbar-bg);
    order: 1;
  }

  #changelist-search {
    label,
    input {
      display: inline-block !important;
    }

    label {
      @extend .pe-2;
      position: relative;
      top: -2px;
      text-align: right;
    }

    input[type='text'] {
      @extend .form-control;
      max-width: 160px;
    }

    input[type='submit'] {
      @extend .btn;
      @extend .btn-sm;
      @extend .ms-2;
      background: var(--bs-baton-changelist-toolbar-btn-bg);
      color: var(--bs-baton-changelist-toolbar-btn-color);
      margin-top: -3px;
      max-width: 100px;

      &:hover {
        background: var(--bs-baton-changelist-toolbar-btn-hover-bg);
      }
    }
  }

  .action-counter {
    display: block;

    @include media-breakpoint-up(sm) {
      display: inline;
    }
  }

  .changelist-filter-toggler {
    @extend .btn;
    @extend .btn-secondary;
    align-items: center;
    cursor: pointer;
    display: inline;
    float: right;
    font-size: 1rem;
    margin-bottom: 1rem;
    min-height: 39px;

    &.active {
      background: var(--bs-baton-accent-color);
      border-color: var(--bs-baton-accent-color) !important;
    }

    &.with-actions {
      display: flex;
      flex-direction: row;
      float: none;
      margin-bottom: 0;
      position: absolute;
      right: 16px;
      top: 32px;
    }

    > span {
      display: none;

      @include media-breakpoint-up(sm) {
        display: inline-block;
        margin-left: 0.5rem;
      }
    }
  }

  #changelist-filter {
    @include make-col(12);
    background: var(--bs-baton-changelist-filters-bg);
    max-width: 100%;
    order: 3;

    @include media-breakpoint-up(lg) {
      @include make-col(0);
      max-height: 200px;
      max-width: 99%;
      display: none;
    }

    h2 {
      background: var(--bs-baton-changelist-filters-title-bg);
      color: var(--bs-baton-changelist-filters-title-color);
      font-size: $h2-size;
      margin-bottom: 0;
      padding: 0.5rem 1rem;
    }

    #changelist-filter-clear {
      background: var(--bs-baton-changelist-filters-clear-bg);
      font-size: 0.9rem;
      margin-bottom: 0;
      margin-top: 0;
      padding: 0.5rem 1rem;

      a {
        color: var(--bs-baton-changelist-filters-title-color);
      }
    }

    .select2-selection__arrow {
      margin-top: 3px;
    }

    h3,
    summary {
      font-size: $h3-size;
      font-weight: 500;
      margin-top: 1rem;
      padding: 0 1rem;

      &:first-child {
        margin-top: 0;
      }
    }

    details > summary {
      list-style: none;
    }
    details > summary::-webkit-details-marker {
      display: none;
    }

    ul {
      list-style-type: none;
      padding-left: 15px;
      padding-right: 15px;

      .selected {
        border-left: 5px solid var(--bs-baton-changelist-filters-selected-border-color);
        margin-left: -15px;
        padding-left: 10px;
      }

      .select2-container {
        outline: 0 !important;
        min-width: auto !important;
        width: 100% !important;
      }

      .select2-selection {
        max-width: 100% !important;
        width: 226px !important;
        height: 38px !important;
      }
      .select2-container--focus,
      .select2-selection--single:focus {
        border-radius: 2px;
        box-shadow: 0 0 0 0.25rem rgba(127, 27, 39, 0.25) !important;
      }
      .select2-selection__arrow {
        top: 3px !important;
        right: 10px !important;
      }
    }
  }

  &.changelist-filter-always-open {
    #changelist-filter,
    #changelist-form {
      transition: none !important;
    }
  }

  // show filters
  &.changelist-filter-active {
    #changelist-filter {
      @include media-breakpoint-up(lg) {
        @include make-col(2);
        max-height: 100%;
        display: block;
      }
    }

    #changelist-form {
      @include media-breakpoint-up(lg) {
        @include make-col(10);
      }
    }
  }

  #changelist-filter-modal {
    @extend .modal-body;
    @extend #changelist-filter;
    display: block;
    max-width: 100% !important;
    max-height: 100% !important;
    order: 0 !important;
    padding: 0.5rem 0 !important;
    width: auto !important;

    select {
      margin-left: 0 !important;
      width: auto !important;
    }

    > div,
    > p {
      display: block;
    }

    ul {
      li {
        .select2-container {
          width: 100% !important;
        }
        .select2-selection {
          border: 1px solid #ced4da;
          outline: 0 !important;
          width: 100% !important;
          max-width: 100% !important;
        }
        .select2-container--focus,
        .select2-selection--single:focus {
          border-radius: 2px;
        }
      }
    }
  }

  #changelist-form {
    @include make-col(12);
    background: var(--bs-baton-changelist-bg);
    border-radius: var(--bs-baton-changelist-form-border-radius);
    order: 2;
    padding: 1rem !important;
    position: relative; // filter icon

    @include media-breakpoint-up(lg) {
      @include make-col(12);
    }

    .actions {
      @extend .mb-4;

      label {
        @extend .pe-2;
      }

      button {
        @extend .btn;
        @extend .btn-sm;
        @extend .ms-2;
        @extend .me-2;

        background: var(--bs-baton-changelist-toolbar-btn-bg);
        color: var(--bs-baton-changelist-toolbar-btn-color);
      }

      .all.hidden,
      .question.hidden,
      .clear {
        display: none;
      }
    }

    select {
      @extend .form-select;
      -moz-appearance: none;
      text-indent: 0.01px;
      text-overflow: clip;
    }
  }

  .results {
    @extend .mt-2;
    @extend .table-responsive;
    background: var(--bs-baton-changelist-bg);
    clear: both;

    table {
      @extend .table;
      @extend .table-striped;

      --bs-table-bg: var(--bs-baton-changelist-table-bg);

      > tbody > tr.selected > td,
      > tbody > tr.selected > th {
        --bs-table-striped-bg: var(--bs-baton-changelist-rl-tr-selected-bg);
        background: var(--bs-baton-changelist-rl-tr-selected-bg) !important;
        color: var(--bs-baton-changelist-rl-tr-selected-color);
      }

      tbody th {
        font-weight: 400;
      }

      .action-checkbox-column {
        width: 20px;

        .text {
          padding-right: 0;
        }
      }

      th,
      td {
        padding: 0.3rem;
      }
    }

    .sortoptions {
      float: right;
    }

    th .text {
      padding-right: 44px;
    }

    .sorted .sortoptions a {
      background: url('../img/sorting-icons.svg') 0 0 no-repeat;
      background-size: 14px auto;
      display: inline-block;
      height: 14px;
      position: relative;
      width: 14px;

      &.sortremove::after {
        color: var(--bs-baton-changelist-sort-icon-color);
        content: '\\';
        font-size: 18px;
        font-weight: 200;
        left: 3px;
        position: absolute;
        top: -6px;
      }

      &.descending {
        background-position: 0 -56px;
        top: 1px;
      }

      &.ascending {
        background-position: 0 -42px;
      }
    }
  }

  .baton-cl-include-top {
    padding-right: 50px;

    @include media-breakpoint-up(sm) {
      padding-right: 100px;
    }
  }

  .baton-cl-include-above,
  .baton-cl-include-below {
    width: 100%;
  }

  .baton-cl-include-below {
    order: 2;
  }

  .admindatefilter {
    border-bottom: 0 !important;
    padding-bottom: 0;
    position: relative;

    form {
      margin-left: 0rem;
    }

    form > p {
      display: flex;
      flex-direction: row;
    }

    .datetimeshortcuts {
      right: 2rem;
    }

    .date-icon {
      right: 20px !important;
    }

    input[type='text'] {
      @extend .form-control;
      flex-grow: 1;
    }

    input[type='submit'],
    input[type='reset'] {
      @extend .btn-sm;
    }

    input[type='reset'] {
      @extend .btn-secondary;
    }
  }
}

#changelist-filter-extra-actions {
  a {
    @extend .btn;
    @extend .btn-sm;
    @extend .btn-secondary;
    margin: 1rem 0;
  }
}

/* modal filters */
.modal-title {
  font-size: $modal-title-size;
}
